<template>
  <div class="home">
  <h4>请找到/ src / assets / 部门信息1591507544230.xlsx 文件导入</h4>
    <el-upload
      class="upload-demo"
      action
      :auto-upload="false"
      :show-file-list="false"
      accept=".xlsx,.xls"
      :on-change="handle"
      list-type="picture"
    >
      <el-button size="small" type="primary">点击上传</el-button>
      <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>

    </el-upload>
      <el-button size="small" type="primary" @click="handleExport">导出</el-button>
      <el-table
      :data="data"
      style="width: 100%">
      <el-table-column
        prop="dName"
        label="部门名称"
        width="180">
      </el-table-column>
      <el-table-column
        prop="sDepartment"
        label="sDepartment"
        width="180">
      </el-table-column>
      <el-table-column
        prop="pCharge"
        label="pCharge"
        width="180">
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
// @ is an alias to /src
import HelloWorld from "@/components/HelloWorld.vue";
// 用二进制处理文件
// character 处理列名
import {readFile, character} from '../assets/lib/utils.js'
// execl数据处理
import xlsx from 'xlsx';


export default {
  name: "Home",
  data(){
    return {
      data:[],
      downloadLoading:false
    }
  },
  components: {
    HelloWorld
  },
  methods:{
    // 采集excel数据
    async handle(ev){
      console.log(ev)
      console.log(ev.raw)
      // 将文件赋值给遍历file，然后判断是否存在
      let file = ev.raw;
      if(!file){
        return false;
      }
      // 读取文件内容,二进制
      let data = await readFile(file);
      console.log(data);
      // 读取二进制数据
      let workbook = xlsx.read(data,{type:"binary"});
      console.log(workbook)
      // 第一张表的数据
      let worksheet = workbook.Sheets[workbook.SheetNames[0]];
      console.log(worksheet);
      // 将execl数据变为json
      data = xlsx.utils.sheet_to_json(worksheet);
      console.log(data)
      // 数据更改key，把读取出来的数据变为最后可以传递给服务器的数据(姓名：name,电话：phone)
      let arr=[];
      data.forEach(item => {
        let obj = {};
        for(let key in character){
          // 判断自身属性是否存在，不存在则跳出
          if(!character.hasOwnProperty(key)) break;
          let v = character[key];
          let text = v.text;
          let type = v.type;
          v = item[text] || "";
          type ==="string"?v=String(v):null;
          obj[key] = v;
        }
        arr.push(obj);
      })
      
      console.log(arr);
      this.data = arr;
    },
    // 导出
  handleExport() {
    if(this.data.length == 0){
      alert('无数据可导出');
      return false;
    }
    this.downloadLoading = true;
    require.ensure([], () => {
      const { export_json_to_excel1 } = require('../execl/Export2Excel');    //引入文件
      const tHeader = ['部门名称', '上级部门', '部门负责人'];  //将对应的属性名转换成中文
      const filterVal = ['dName', 'sDepartment', 'pCharge'];    //table表格中对应的属性名
      const list = this.data;
      const data = this.formatJson(filterVal, list);
      const DepartmentName = new Date().getTime();
      console.log(DepartmentName)
      export_json_to_excel1(tHeader, data, `部门信息${DepartmentName}`);
      this.downloadLoading = false;
    })
  },
  formatJson(filterVal, jsonData) {
    return jsonData.map(v => filterVal.map(j => v[j]))
  },

  }
};
</script>
